<!-- src/views/back/systemSetting/CreateDictDataDrawer.vue -->
<template>
  <BasicModal
    @register="modalRegister"
    ref="modalRef"
    class="basicModal"
    @on-ok="okModal"
    @on-close="reload"
  >
    <BasicForm @register="register" @reset="handleReset" class="basicForm" />
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useMessage } from 'naive-ui';
  import { basicModal as BasicModal, useModal } from '@/components/Modal';
  import { BasicForm, useForm } from '@/components/Form';

  // API 导入
  import { addDictData, updateDictData } from '@/api/business/dist';

  // 定义组件属性
  const props = defineProps<{
    dictType?: string;
  }>();

  // 定义事件
  const emit = defineEmits<{
    (e: 'reload'): void;
  }>();

  const message = useMessage();
  const modalRef = ref();

  // 注册模态框
  const [modalRegister, { openModal, closeModal, setProps, setSubLoading }] = useModal({
    title: '新增字典',
  });

  // 注册表单
  const [register, { submit, setFieldsValue }] = useForm({
    gridProps: {
      cols: 1,
    },
    labelWidth: 120,
    layout: 'horizontal',
    showActionButtonGroup: false,
    schemas: [
      {
        field: 'dictValue',
        component: 'NInput',
        label: '键',
        labelMessage: '',
        giProps: {
          span: 1,
        },
        componentProps: {
          maxlength: 10,
        },
        rules: [
          {
            required: true,
            message: '请输入键',
            trigger: ['blur', 'submit'],
          },
        ],
      },
      {
        field: 'dictLabel',
        component: 'NInput',
        label: '值',
        labelMessage: '',
        giProps: {
          span: 1,
        },
        componentProps: {
          maxlength: 64,
        },
        rules: [
          {
            required: true,
            message: '请输入值',
            trigger: ['blur', 'submit'],
          },
        ],
      },
      {
        field: 'sort',
        component: 'NInputNumber',
        label: '排序',
        labelMessage: '',
        giProps: {
          span: 1,
        },
        componentProps: {
          showButton: true,
          min: 1,
          precision: 0,
          max: 30000,
        },
      },
      {
        field: 'remark',
        component: 'NInput',
        label: '描述',
        labelMessage: '',
        giProps: {
          span: 1,
        },
        componentProps: {
          type: 'textarea',
          placeholder: '请输入',
          showCount: true,
          maxlength: 300,
        },
      },
    ],
  });

  // 重置表单
  function handleReset() {
    // 表单重置逻辑
  }

  // 显示模态框
  function showModal(title: string) {
    setProps({
      title: title,
    });
    openModal();
  }

  // 确认操作
  async function okModal() {
    try {
      const values = await submit();
      if (values) {
        if (values.dictId) {
          // 更新字典数据
          await updateDictData(values);
          message.success('更新成功');
        } else {
          // 添加字典数据
          values.dictType = props.dictType;
          await addDictData(values);
          message.success('添加成功');
        }
        closeModal();
        reload();
      } else {
        message.error('请填写完整信息');
        setSubLoading(false);
      }
    } catch (error) {
      message.error('操作失败: ' + (error.message || '未知错误'));
      setSubLoading(false);
    }
  }

  // 重新加载
  function reload() {
    emit('reload');
  }

  // 设置表单数据
  function setFormData(data: any) {
    setFieldsValue(data);
  }

  // 暴露方法给父组件
  defineExpose({
    showModal,
    setFormData,
  });
</script>

<style scoped>
  .basicModal {
    /* 根据需要添加样式 */
  }

  .basicForm {
    /* 根据需要添加样式 */
  }
</style>
